{% load static %}
<div class="banner_list" data-tab-id="banner_list">
    <div class="banner_list_son" data-tab-id="banner_list_son">

        <div class="container-fluid py-1 bg-grep text-white card me-2"
             style="width: 85vw; margin: 0 auto;"
             data-module-root="banner_list">  <!-- 最外层 fixed-area -->

            <!-- 横幅列表 -->
            <div class="card-body pt-1 wb-0 pb-0">
                <div class="table-responsive w-0 p-0">
                    <table class="table table-hover align-middle w-100" id="banners-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>图片</th>
                            <th>标题</th>
                            <th>优先级</th>
                            <th style="text-align: center; vertical-align: middle;">操作</th>
                            <th style="text-align: center; vertical-align: middle;">关联商品</th>
                            <th style="text-align: center; vertical-align: middle;">状态</th>

                        </tr>
                        </thead>
                        <tbody id="banners-body">
                        {% for banner in banners %}
                            <tr data-id="{{ banner.id }}" id="banner-row-{{ banner.id }}">
                                <!-- ID -->
                                <td>{{ banner.id }}</td>
                                <!-- 图片 -->
                                <td>
                                    {% if banner.image %}
                                        <div class="banner-image-container">
                                            <img src="{{ banner.image.url }}" alt="{{ banner.title }}"
                                                 class="img-thumbnail banner-preview"
                                                 style="max-width: 80px; cursor: pointer;"
                                                 data-url="{{ banner.image.url }}">
                                            <button class="btn btn-sm btn-outline-secondary image-upload-btn d-none">
                                                <i class="bi bi-upload"></i>
                                            </button>
                                        </div>
                                    {% else %}
                                        <div class="banner-image-container">
                                            <span class="text-muted">无图片</span>
                                            <button class="btn btn-sm btn-outline-secondary image-upload-btn d-none">
                                                <i class="bi bi-upload"></i>
                                            </button>
                                        </div>
                                    {% endif %}
                                </td>
                                <!-- 标题 -->
                                <td>
                                    <div class="banner-title-container">
                                        <span class="banner-title">{{ banner.title|default:"-" }}</span>
                                        <input type="text" class="form-control form-control-sm banner-title-edit d-none"
                                               value="{{ banner.title|default:'' }}">
                                    </div>
                                </td>

                                <!-- 优先级 -->
                                <td>
                                    <span class="banner-order">{{ banner.order }}</span>
                                    <input type="number" class="form-control form-control-sm banner-order-edit d-none"
                                           value="{{ banner.order }}" min="1">
                                </td>

                                <!-- 操作 -->
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-primary edit-banner"
                                                data-id="{{ banner.id }}">
                                            <i class="bi bi-pencil"></i> <span>编辑</span>
                                        </button>

                                        <button class="btn btn-sm btn-danger delete-banner"
                                                data-id="{{ banner.id }}"
                                                data-title="{{ banner.title|default:'未命名横幅' }}">
                                            <i class="bi bi-trash"></i> <span>删除</span>
                                        </button>

                                        <!-- 编辑状态按钮 -->
                                        <button class="btn btn-sm btn-success save-banner d-none"
                                                data-id="{{ banner.id }}">
                                            <i class="bi bi-save"></i> <span>保存</span>
                                        </button>
                                        <button class="btn btn-sm btn-warning cancel-edit d-none"
                                                data-id="{{ banner.id }}">
                                            <i class="bi bi-x-circle"></i> <span>作废</span>
                                        </button>
                                    </div>
                                </td>

                                <!-- 关联商品列 -->
                                <td class="product-cell">
                                    <div class="banner-product-container">
                                        <!-- 显示区域 - 始终显示 -->
                                        <div class="product-display">
                                            <span class="banner-product text-primary m-0 p-0">
                                                {% if banner.product %}
                                                    <span class="product-name" title="{{ banner.product.name }} (ID: {{ banner.product.id }})">
                                                        {{ banner.product.name}}
                                                    </span>
                                                    <span class="product-id">(ID: {{ banner.product.id }})</span>
                                                {% else %}
                                                    <span class="text-muted">未关联</span>
                                                {% endif %}
                                            </span>
                                            <button class="btn btn-sm btn-link edit-product-btn" style="font-size: 10px;">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                        </div>

                                        <!-- 编辑区域 - 初始隐藏 -->
                                        <div class="product-edit d-none">
                                            <select class="form-select form-select-sm product-select">
                                                <option value="">-- 选择商品 --</option>
                                                {% for product in products %}
                                                    <option value="{{ product.id }}"
                                                        {% if banner.product and banner.product.id == product.id %}selected{% endif %}>
                                                        {{ product.name }} (ID: {{ product.id }})
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </td>

                                <!-- 启用与禁用 -->
                                <td>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input toggle-status" type="checkbox"
                                               data-id="{{ banner.id }}" {% if banner.is_active %}checked{% endif %}>
                                        <label class="form-check-label">
                                            {{ banner.is_active|yesno:"启用,禁用" }}
                                        </label>
                                    </div>
                                </td>

                            </tr>
                        {% endfor %}

                        <!-- 新增行模板（隐藏） -->
                        <tr id="new-banner-row" class="d-none" data-id="new">
                            <!-- ID -->
                            <td>New</td>
                            <!-- 图片 -->
                            <td>
                                <div class="banner-image-container">
                                    <span class="text-muted">无图片</span>
                                    <button class="btn btn-sm btn-outline-secondary image-upload-btn">
                                        <i class="bi bi-upload"></i>
                                    </button>
                                </div>
                            </td>
                            <!-- 标题 -->
                            <td>
                                <span class="banner-title"></span>
                                <input type="text" class="form-control form-control-sm banner-title-edit"
                                       placeholder="输入标题">
                            </td>
                            <!-- 优先级 -->
                            <td>
                                <span class="banner-order"></span>
                                <input type="number" class="form-control form-control-sm banner-order-edit"
                                       value="1" min="1">
                            </td>
                            <!-- 操作 -->
                            <td>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-primary edit-banner d-none"
                                            data-id="{{ banner.id }}">
                                        <i class="bi bi-pencil"></i> <span>编辑</span>
                                    </button>

                                    <button class="btn btn-sm btn-danger delete-banner d-none"
                                            data-id="{{ banner.id }}"
                                            data-title="{{ banner.title|default:'未命名横幅' }}">
                                        <i class="bi bi-trash"></i> <span>删除</span>
                                    </button>

                                    <button class="btn btn-sm btn-success save-banner" data-id="new">
                                        <i class="bi bi-save"></i> <span>保存</span>
                                    </button>
                                    <button class="btn btn-sm btn-warning cancel-edit" data-id="new">
                                        <i class="bi bi-x-circle"></i> <span>作废</span>
                                    </button>
                                </div>
                            </td>
                            <!-- 关联商品列 -->
                            <td class="product-cell">
                                    <div class="banner-product-container">
                                        <div class="product-display">
                                            <span class="banner-product text-primary m-0 p-0">
                                                    <span class="text-muted">未关联</span>
                                                    <span class="product-id"></span>
                                            </span>
                                            <button class="btn btn-sm btn-link edit-product-btn" style="font-size: 10px;">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                        </div>

                                        <!-- 编辑区域 - 初始隐藏 -->
                                        <div class="product-edit d-none">
                                            <select class="form-select form-select-sm product-select">
                                                <option value="">-- 选择商品 --</option>
                                                {% for product in products %}
                                                    <option value="{{ product.id }}"
                                                        {% if banner.product and banner.product.id == product.id %}selected{% endif %}>
                                                        {{ product.name }} (ID: {{ product.id }})
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </td>

                            <!-- 启用与禁用 -->
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input toggle-status" type="checkbox" checked>
                                    <label class="form-check-label">启用</label>
                                </div>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 搜索和分页和新增区域 -->
            <div class="d-flex justify-content-between align-items-center flex-nowrap pb-0 searchAndPage">
                <!-- 搜索区域 (70%宽度 + 右侧间距) -->
                <div class="card-body p-0 m-0 me-2 flex-grow-0" style="flex-basis: calc(22% - 0.22rem)">
                    <form id="banner-search-form" action="javascript:void(0);">
                        <div class="input-group">
                            <input type="text" name="search" class="form-control border-primary"
                                   placeholder="搜索横幅标题..." value="{{ search_term }}">
                            <button type="submit" class="btn btn-outline-primary btn-sm">搜索</button>
                        </div>
                    </form>
                </div>
                <!-- 中间:分页控件 -->
               {% include 'account/partials/paging.html' %}
               <!-- 按钮区域 (自动填充剩余空间) -->
               <div class="d-flex justify-content-end align-items-center" style="flex-basis: calc(20% - 0.2rem)">
                    <button class="btn btn-outline-primary w-100 me-2" id="add-banner-btn">
                        <i class="bi bi-plus-circle"></i> 新增横幅
                    </button>
                </div>
            </div>
        </div>

        <!-- 隐藏的文件上传输入 -->
        <input type="file" id="image-upload-input" class="d-none" accept="image/*">

        <!-- 图片上传模态框 -->
        <div class="modal fade" id="imageUploadModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">上传横幅图片</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="image-upload-form">
                            <input type="hidden" id="current-banner-id" value="">
                            <div class="mb-3">
                                <label for="banner-image" class="form-label">选择图片</label>
                                <input class="form-control" type="file" id="banner-image" accept="image/*">
                            </div>
                            <div class="preview-area mt-3 text-center">
                                <img id="image-preview" src="" class="img-fluid d-none" alt="图片预览">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="confirm-upload">确认上传</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图片预览模态框 -->
        <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">图片预览</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <img id="modalImage" src="" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<style>
.card-body.pt-1.wb-0.pb-0 {
  flex: 1 0 auto; /* 自动填充剩余空间  */
  margin-bottom: -0.5rem; /* 负边距消除残留  */
 }
    /* 把表格固定在离顶部45px处 */
    [data-tab-id="banner_list"] .fixed-area {
        position: absolute;
        top: 65px;
        right: 0;
        bottom: 15px;
    }

    /* 横幅列宽设置 */
    [data-tab-id="banner_list"] #banners-table {
        display: grid;
        grid-template-columns: 3fr 6fr 43fr 6fr 12fr 22fr 8fr; /* 比例与列宽一致 */
        width: 100%;
    }

    [data-tab-id="banner_list"] #banners-table thead,
    [data-tab-id="banner_list"] #banners-table tbody,
    [data-tab-id="banner_list"] #banners-table tr {
        display: contents; /* 子元素直接参与网格布局 */
    }

    [data-tab-id="banner_list"] #banners-table th,
    [data-tab-id="banner_list"] #banners-table td {
        grid-column: auto; /* 自动放入对应列 */
    }

    /* 横幅图片 */
    [data-tab-id="banner_list"] img {
      width: 120%;
      height: 120%;
      object-fit: cover; /* 关键：裁剪填充保持比例 */
      object-position: center;
     }
    /* 横幅管理上传图片按钮 */
    [data-tab-id="banner_list"] .banner-image-container {
        position: relative;
        {#display: inline-block;#}
        display: flex;
        align-items: center;
        justify-content: center;

    }
    [data-tab-id="banner_list"] .image-upload-btn {
        position: absolute;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        opacity: 0.5;
        transition: opacity 0.3s;
        color: white;
        background: #3dd5f3;
    }

    /* 提示文字 */
    [data-tab-id="banner_list"] .image-upload-btn:hover::after {
        content: "请上传图片";
        position: absolute;
        bottom: -30px; /* 距离图标下方位置 */
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        background: #333;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 10;
    }

    [data-tab-id="banner_list"] .image-upload-btn:hover {
        opacity: 1; /* 0-1透明度:1为完全不透明 */
        transition: opacity 0.3s; /* 添加过渡动画 */
    }

    /* 搜索关键字高亮 */
    [data-tab-id="banner_list"] .search-highlight {
      background-color: #ffeb3b; /* 明亮的黄色背景 */
      color: #333; /* 深色文字确保可读性 */
      font-weight: bold; /* 加粗突出显示 */
      padding: 0 2px; /* 增加文字内边距 */
      border-radius: 3px; /* 圆角效果 */
      box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 轻微阴影增加层次感 */
    }

    /* 编辑状态突出显示 */
    [data-tab-id="banner_list"] .editing-row {
        background-color: rgba(13, 110, 253, 0.1) !important;
        transition: background-color 0.3s;
    }

    /* 新行样式 */
    [data-tab-id="banner_list"] .new-banner-row {
        animation: highlight 2s;
    }

    [data-tab-id="banner_list"]

    @keyframes highlight {
        0% {
            background-color: rgba(25, 135, 84, 0.3);
        }
        100% {
            background-color: transparent;
        }
    }

    /* 操作按钮组 */
    [data-tab-id="banner_list"] .btn-group .btn {
        transition: all 0.3s;
    }

    /* 关联商品列宽度 */
    [data-tab-id="banner_list"] .product-cell {
        max-width: 350px;
        white-space: nowrap;
    }

    [data-tab-id="banner_list"] .banner-product-container {
        position: relative;
    }

    [data-tab-id="banner_list"] .product-display {
        display: flex;
        {#align-items: center;#}
        {#justify-content: space-between;#}
    }

    [data-tab-id="banner_list"] .banner-product{
        {#flex-grow: 1;#}
        overflow: hidden;
        text-overflow: ellipsis;
        {#white-space: nowrap;#}
    }

    [data-tab-id="banner_list"] .product-name {
        {#display: inline-block;#}
        {#max-width: 350px;#}
        overflow: hidden;
        text-overflow: ellipsis;
        {#white-space: nowrap;#}
        vertical-align: bottom;
    }

    [data-tab-id="banner_list"] .product-id {
        font-size: 0.85em;
        color: #6c757d;
    }

    [data-tab-id="banner_list"] .edit-product-btn {
        padding: 0 0.25rem;
        font-size: 0.875rem;
    }

    [data-tab-id="banner_list"] .product-edit {
        position: relative;
    }

    [data-tab-id="banner_list"] .edit-actions {
        display: flex;
        gap: 0.5rem;
    }

    [data-tab-id="banner_list"] .save-product-btn {
        flex: 1;
    }
    /* 关联商品列样式(以上,到此) */

    /* 分页按钮样式优化 */
    [data-tab-id="banner_list"] .position-relative {
        margin-right: 20px;
        {#bottom: 10px;#}
        align-items: center;
        justify-content: end;
    }
    [data-tab-id="banner_list"] .current-total {
        color: black;
    }

    [data-tab-id="banner_list"] .pagination-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
    }

    /* 禁用按钮样式 */
    [data-tab-id="banner_list"] .pagination-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* 跳转输入框样式 */
    [data-tab-id="banner_list"] .input-group.input-group-sm {
        width: 120px;
    }

    [data-tab-id="banner_list"] #page-jump-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        height: 36px;
    }

    [data-tab-id="banner_list"] #page-jump-btn {
        background: #6b8dd6 ;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 36px;
        padding: 0 12px;
    }

    /* 响应式调整 */
    [data-tab-id="banner_list"] @media (max-width: 768px) {
        .d-flex.justify-content-end {
            flex-wrap: wrap;
            justify-content: center !important;
        }

        .me-3, .btn-group, .input-group {
            margin-bottom: 10px;
        }
    }


</style>
